<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.ort">
<head>
    <meta charset="UTF-8">
    <title></title>
    <script th:src="@{/layui/layui.js}" type="text/javascript"></script>
    <link th:href="@{/layui/css/layui.css}" rel="stylesheet" />
    <style>
        .layui-table-cell {
            height: 60px;
            line-height: 60px;
        }
        .layui-upload-img{
            border: 1px solid #1E9FFF;
            max-width: 150px;
            max-height: 56px;
            /*border-radius: 200px;*/
        }

    </style>
</head>

<body>
<div class="layui-panel" style="padding: 8px;">
    <fieldset class="layui-elem-field layui-border-blue">
        <legend>搜索信息</legend>
        <form class="layui-form" style="margin: 15px;">
            <div class="layui-form-item">
                <div class="layui-inline">
                    <label class="layui-form-label">商品名</label>
                    <div class="layui-input-inline">
                        <input class="layui-input" type="text"  name="name" autocomplete="off" />
                    </div>
                </div>
                <div class="layui-inline">
                    <label class="layui-form-label" style="padding-left:1px ;">商品id</label>
                    <div class="layui-input-inline">
                        <input class="layui-input" type="text" name="id" autocomplete="off" />
                    </div>
                </div>
                <div class="layui-inline">
                    <div class="layui-input-inline">
                        <a class="layui-btn layui-btn-primary" lay-submit="" lay-filter="searchBtn">
                            <i class="layui-icon layui-icon-search"></i>
                            搜索
                        </a>
                    </div>
                </div>
            </div>
        </form>
    </fieldset>
    <div>
        <table id="memberTable"lay-filter="memberTable"></table>
    </div>
</div>
<script id="photo" type="text/html">

    {{# if(d.photo!=''){ }}
    <img src="/file/fc/showImg/{{d.photos[0]}}">
    {{# }}}
</script>
<script id="tool" type="text/html">
    {{# if(d.status===1){ }}
    <a class="layui-btn layui-btn-warm layui-btn-xs" lay-event="up">出售</a>
    <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="down">下架</a>
    {{#}
    else if(d.status===0){ }}
    <span style="font-size: large;text-align: center; color: red">已下架</span>
    {{# }
   else if(d.status ===2){ }}
    <span style="font-size: large;text-align: center; color: dodgerblue">正在出售</span>
    {{# }
   else if(d.status ===3){ }}
    <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="down">下架</a>
    {{# } }}

</script>
<script id="tableBar" type="text/html">
		</script>

<script>
var $;
    layui.use(['table','form','layer','jquery'],function(){
        var table=layui.table,form=layui.form,layer=layui.layer;
        $=layui.jquery;

        //加载表格
        table.render({
            elem:'#memberTable',
            height:'full-160',
           url:'/goods/gc/find',
            toolbar:'#tableBar',
            page:true,
            cols:[
                [
                    {field:'id',align:'center',title:'商品Id',width:80},
                    {field:'photo',title:'商品图片',width: 150,templet:'#photo'},
                    {field:'name',align:'center',title:'商品名称',width:100},
                    {field:'number',align:'center',title:'商品编号',width:120},
                    {field:'marketPrice',align:'center',title:'价格',width:80,templet:function (obj){
                            return obj.categories+"￥/"+obj.unit
                        }},
                    {field:'categories',align:'center',title:'商品类别',width:100},
                    {field:'brandOwner',align:'center',title:'品牌商',width: 120},
                    {field:'introductionin',title:'简介',align:'center'},
                    {field:'inventory',title:'库存信息',align:'center',width: 100,templet:function (obj){
                          var o=JSON.parse(obj.inventory);
                            return o[0].num;
                        }},
                    {field:'createTime',title:'创建时间',align:'center',width: 150},
                    {field:'status',title:'状态',width:120,align:'center',templet:function(obj){
                            if(obj.status==0){
                                return '<div style="margin-top: 15px;width: 40px; height: 30px; background-color: #e8f4ff;border-color: #d1e9ff; text-align: center; line-height: 32px; color: #1890ff">下架</div>';
                            }else if(obj.status==1){
                                return '<div style="margin-top: 15px;width: 75px; height: 30px; background-color: #e8f4ff;border-color: #d1e9ff; text-align: center; line-height: 32px; color: #1890ff">上架未售</div>';
                            }else if(obj.status==2){
                                return '<div style="margin-top: 15px;width: 40px; height: 30px; background-color: #e8f4ff;border-color: #d1e9ff; text-align: center; line-height: 32px; color: #1890ff">出售</div>';

                            }else if(obj.status==3){
                                return '<div style="margin-top: 15px;width: 40px; height: 30px; background-color: #e8f4ff;border-color: #d1e9ff; text-align: center; line-height: 32px; color: #1890ff">售完</div>';

                            }
                        }},
                    {fixed:'right',title:'操作',width:200,align:'center',toolbar:'#tool'}
                ]
            ]
        })
        var action={
            updateStatus:function(id,sta){
                $.ajax({
                    type:'post',
                    url:'/goods/gc/update',
                    data:{
                      id:id,
                      status:sta
                    },
                    dataType:'json',
                    success:function (result){
                      layer.msg(result.msg);
                      if(result.is){
                          layui.table.reload('memberTable');
                      }
                    }
                })
            }
        }
        table.on('tool(memberTable)',function (data){
            var event=data.event;

            if('up'==event){
            action.updateStatus(data.data.id,2);
            }else if('down'==event){
              action.updateStatus(data.data.id,0);
            }
        })
        form.on('submit(searchBtn)',function(data){
            var dataForm=data.field;
            table.reload('memberTable',{
                url:'/goods/gc/seachFind',
                page:{
                    curr:1
                },
                where:{
                    name:dataForm.name,
                    id:dataForm.id,

                }
            })
        })
    })
</script>
</body>
</html>
